<style lang="less">
    /*@import './international.less';*/
</style>

<template>
    <Select v-model="selectData" :clearable="clearable" :url="url" :params="params" :valueField="valueField"
            :textField="textField" :filterable="filterable" :disabled="disabled" @on-change="onChange">
        <template v-if="data && data.length">
            <Option v-for="option in data" :value="option[valueField]" :key="option.id">{{ option[textField] }}</Option>
        </template>
        <template v-else>
            <Option v-for="option in options" :value="option[valueField]" :key="option.id">{{ option[textField] }}
            </Option>
        </template>
    </Select>
</template>

<script>
    // datagrid
    import util from '@/libs/util';

    export default {
        data () {
            return {
                name: 'autoSelect',
                options: [],
                selectData: this.model
            }
        },
        methods: {
            selectOption(cnf){
                let data = cnf.data || [];
                let url = cnf.url;
                let params = cnf.params;
                util.post({
                    url: url,
                    params: params,
                    ajaxSuccess(response){
                        let context = response.data;
                        let resData = context.data.total === undefined ? context.data : context.data.list; // 支持分页和不分页的
                        resData.forEach((value) => {
                            data.push(value);
                        });
                    }
                })

            },
            onChange(value) {
                let me = this;
                for (let i = 0; i < me.options.length; i++) {
                    if (value === (me.options[i])[me.valueField]) {
                        this.$emit("autoSelect_onChange", me.options[i], i, me.options);
                        return;
                    }
                }
            }
        },
        props: {
            model: [Object, String, Number],
            clearable: {
                type: Boolean,
                default(){
                    return true;
                }
            },
            url: String,
            params: Object,
            valueField: {
                type: [Object, Number, String],
                default(){
                    return "id";
                }
            },
            textField: {
                type: [Object, Number, String],
                default(){
                    return "value";
                }
            },
            filterable: {
                type: [Boolean],
                default(){
                    return false;
                }
            },
            disabled: {
                type: [Boolean],
                default(){
                    return false;
                }
            },
            data: {
                type: [Array],
                default(){
                    return null;
                }
            }
        },
        mounted() {
            let me = this;
            if (!me.data) {
                me.selectOption({
                    url: me.url,
                    data: me.options,
                    params: me.params
                });
            }
        },
        watch: {
            model(val) {
                this.selectData = val;
            },
            selectData(val){
                this.$emit("update:model", val);
            }
        },
    }
</script>